<template>
  <div class="survey-box">
    <el-row type="flex" justify="space-between" align="middle" class="survey-hedaer">
      <div class="title">{{ title }}</div>
      <el-link v-if="linkUrl != ''" :underline="false" type="primary" @click="$router.push({ path: linkUrl })">查看详情</el-link>
      <change-time v-else :school="hasSchool" @update:time="changeTime" @update:school="changeSchool" />
    </el-row>
    <el-row class="survey-body" :gutter="72">
      <el-col :span="12"><visit-rank :table-datas="response.visit_rank || []" :loading="loading" /></el-col>
      <el-col :span="12"><pay-rank :table-datas="response.pay_rank || []" :loading="loading">></pay-rank></el-col>
    </el-row>
  </div>
</template>

<script>
import VisitRank from './components/visit_rank.vue';
import PayRank from './components/pay_rank.vue';
import ChangeTime from '@/pages/data/components/changetime.vue';
export default {
  components: {
    VisitRank,
    PayRank,
    ChangeTime
  },
  props: {
    title: {
      type: String,
      default: '课程看板'
    },
    // 指定跳转链接,右侧为查看详情按钮,否则为时间选择
    // 暂未时间按时间选择展示数据
    linkUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      time: 'today',
      mhm_id: 1,
      loading: true,
      response: {}
    };
  },
  computed: {
    hasSchool() {
      return !!this.response.is_platform;
    }
  },
  created() {
    this.loadData();
  },
  methods: {
    changeTime: function(time) {
      this.time = time;
      this.loading = true;
      this.loadData();
    },
    changeSchool: function(mhm) {
      this.mhm_id = mhm;
      this.loading = true;
      this.loadData();
    },
    loadData: function() {
      this.$http.get(
        '/admin/data/course/rank',
        {
          time: this.time,
          mhm_id: this.mhm_id
        },
        response => {
          this.response = response.data;
          this.loading = false;
        },
        errror => {
          this.loading = false;
        },
        false
      );
    }
  }
};
</script>

<style scoped lang="scss">
.survey-box {
  background-color: #fff;
  min-height: 150px;
  margin-bottom: 20px;
  padding: 10px 20px 25px;
  .survey-hedaer {
    margin-bottom: 28px;
    height: 36px;
    padding-right: 20px;
    background-color: #f1f8ff;
    .title {
      color: #303133;
      font-size: 15px;
      padding-left: 6px;
      border-left: 2px solid #5191ff;
    }
  }
}
</style>
